<template>
  <div class="body">
    <div class="content">
      <div class="content-top">
        <el-button type="success" icon="el-icon-edit" @click="addMenu">
          添加菜单
        </el-button>
      </div>
      <div class="main-content">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          default-expand-all
          :tree-props="{
            children: 'childs',
            hasChildren: 'hasChildren'
          }"
        >
          <el-table-column prop="" label="标题" width="300">
            <template v-slot="{ row }">
              <span v-if="row.childs">
                <i class="el-icon-folder-opened" style="font-size: 20px" />
                {{ row.title }}
              </span>
              <span v-else-if="row.is_point">
                <i class="el-icon-view" style="font-size: 20px" />
                {{ row.title }}
              </span>
              <span v-else>
                <i class="el-icon-document-remove" style="font-size: 20px" />
                {{ row.title }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限代码" />
          <el-table-column prop="" label="操作" width="180">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                plain
                @click="edit(row)"
              />
              <el-popconfirm title="确定删除吗？" @onConfirm="deleteFn(row.id)">
                <el-button
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                />
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :title="state ? '创建菜单' : '编辑菜单'"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="权限组名称">
            <el-radio-group v-model="ruleForm.is_point" @input="inputBtn">
              <el-radio :disabled="!state" :label="false"> 菜单 </el-radio>
              <el-radio :disabled="!state" :label="true"> 权限点 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限组名称" prop="">
            <el-select v-model="ruleForm.pid" placeholder="请选择">
              <option-views v-if="flag" :options="tableData2" />
              <limitoption-views v-else :options="tableData1" />
              <!-- <el-option
                v-for="item in permissionsList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="权限代码" prop="code">
            <el-input v-model="ruleForm.code" style="width: 300px" />
          </el-form-item>
          <el-form-item label="权限标题" prop="title">
            <el-input v-model="ruleForm.title" style="width: 300px" />
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="state" type="primary" @click="areYouSure">
          确 定
        </el-button>
        <el-button v-else type="primary" @click="saveUser"> 保 存 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMenuListApi,
  PostMenuApi,
  deleteMenuApi,
  reviseMenuApi
} from '@/api/backstage'
import optionViews from './components/optionViews.vue'
import LimitoptionViews from './components/limitoptionViews.vue'
export default {
  components: { optionViews, LimitoptionViews },
  data() {
    return {
      flag: true,
      state: true,
      tableData: [],
      tableData1: [],
      tableData2: [],
      dialogVisible: false,
      ruleForm: {
        title: '',
        code: '',
        pid: '',
        is_point: false
      },
      rules: {
        title: [{ required: true, message: '请输入权限标题', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标题', trigger: 'blur' }]
      },
      permissionsList: [],
      value: ''
    }
  },
  async created() {
    this.getMenuList()
  },
  methods: {
    async getMenuList() {
      const { data } = await getMenuListApi()
      // this.tableData = data
      // console.log(this.tableData)
      const list = data
      this.tableData2 = JSON.parse(JSON.stringify(data))
      const res = JSON.parse(JSON.stringify(data))
      list.forEach((element) => {
        // element.disabled = true
        if (element.points) {
          const childs = element.points
          element.childs = childs
        }
        if (element.childs) {
          element.childs.forEach((ele) => {
            if (ele.points) {
              const childs = ele.points
              ele.childs = childs
            }
          })
        }
      })
      this.tableData = list
      res.forEach((ele) => {
        ele.disabled = true
      })
      this.tableData1 = res
      console.log(this.tableData)
    },
    // 关闭
    handleClose(done) {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        title: '',
        code: '',
        pid: '',
        is_point: false
      }
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
    },
    // 取消
    cancel() {
      this.handleClose()
    },
    // 页面点击添加菜单
    addMenu() {
      this.state = true
      this.dialogVisible = true
    },
    // 页面点击编辑
    edit(row) {
      this.ruleForm = row
      !this.ruleForm.is_point
        ? (this.ruleForm.is_point = false)
        : (this.ruleForm.is_point = true)
      this.state = false
      this.dialogVisible = true
    },
    areYouSure() {
      this.$refs.ruleForm.validate(async (valid) => {
        // console.log(valid)
        if (valid) {
          // 表单校验通过
          // 执行提交逻辑
          await PostMenuApi(this.ruleForm)
          this.handleClose()
          this.dialogVisible = false
          this.getMenuList()
          this.$message.success('添加成功')
        }
      })
    },
    // 确认保存
    saveUser() {
      this.$refs.ruleForm.validate(async (valid) => {
        console.log(valid)
        if (valid) {
          // 表单校验通过
          // 执行提交逻辑
          await reviseMenuApi(this.ruleForm)
          this.handleClose()
          this.getMenuList()
          this.$message.success('修改成功')
        }
      })
    },
    async deleteFn(id) {
      await deleteMenuApi(id)
      this.$message.success('成功删除')
      this.getMenuList()
    },
    inputBtn(value) {
      // console.log(value)
      if (value) {
        this.flag = false
      } else {
        this.flag = true
      }
    }
  }
}
</script>
<style scoped lang="scss">
.body {
  padding: 20px;
}
.content {
  background-color: #fff;
  padding: 20px;
  .content-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .top-prompt {
    padding: 16px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border-radius: 4px 4px 0 0;
  }
  ::v-deep .el-table__expand-icon .el-icon-arrow-right {
    display: none;
  }
}
</style>
